<template>
  <el-table
    ref="gridTable"
    v-loading="listLoading"
    :data="showGridData"
    :size="size"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column
      v-if="multiple"
      type="selection"
      width="30"
    />
    <el-table-column
      v-for="(item,index) in gridColumns"
      :key="index"
      :prop="item.prop"
      :class-name="item.className || ''"
      :label="item.label"
      :resizable="!!item.resizable"
      :sortable="item.sortable"
      :align="item.align"
      :fixed="item.fixed"
      :type="item.type"
      :show-overflow-tooltip="item.showOverflowTooltip"
      :width="item.width"
      fit
    >
      <template slot-scope="scope">
        <cell
          v-if="item.render"
          :row="scope.row"
          :column="item"
          :index="scope.$index"
          :render="item.render"
        />
        <template v-else-if="item.filter">{{ item.filter(scope.row[item.prop]) }}</template>
        <formatter-component
          v-else
          :format="item.format"
          :options="item.options"
          :row="scope.row"
          :column="item.prop"
          :index="scope.$index"
          @click="onCellClick"
        />
      </template>
    </el-table-column>
    <el-table-column
      v-if="visibleHandle"
      fixed="right"
      label="操作"
      align="right"
      class-name="action-column"
      :width="gridEditWidth?gridEditWidth:''"
    >
      <template slot-scope="scope">
        <el-button
          v-for="(item,index) in validateHandles(scope.row)"
          :key="index"
          size="mini"
          :type="item.type?item.type:'text'"
          @click="handleEmit(item.emitName, scope.row)"
        >{{ item.name }}</el-button>
      </template>
    </el-table-column>
    <div
      slot="append"
      class="crud-footer"
    >
      <el-checkbox
        v-if="multiple"
        v-model="checkAll"
        :indeterminate="isIndeterminate"
        @change="toggleAllMultipleSelection"
      >全选</el-checkbox>
      <slot name="append" />
    </div>
  </el-table>
</template>

<script>
import GridProps from '../mixins/gridProps'
export default {
  name: 'GridTableView',
  mixins: [GridProps]
}
</script>
